<template>
  <div class="login-container">
    <div class="login-form">
      <h4>用户登录</h4>
      <el-form :model="form">
        <el-form-item label="账号">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" type="password"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="success" size="small" @click="login">登录</el-button>
      <el-button size="small">重置</el-button>
    </div>
  </div>
</template>

<script setup>
import { userLogin } from "@/api/login";
import { ElMessage } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import Cookie from "js-cookie";
import { useRouter } from "vue-router";
const router = useRouter();
const form = reactive({
  name: ref("admin"),
  password: ref(123456),
});
// 登录
function login() {
  userLogin({
    username: form.name,
    password: form.password,
  })
    .then((res) => {
      Cookie.set("token", res.data.token);
      router.push({ name: "user" });
      ElMessage.success("登录成功");
      sessionStorage.setItem("userName", res.data.username);
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
}
onMounted(() => {
  console.log(Cookie.get("token"));
});
</script>

<style lang="scss" scoped>
.login-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .login-form {
    text-align: center;
    padding: 10px 20px;
    border: 1px solid #ccc;
    border-radius: 15px;
  }
}
</style>
